<template>
    <div class="session">
        <div class="sub_session">
            <div class="title">主打功能简介</div>
            <el-row :gutter="data.contentParam.gutter">
                <el-col :span="data.contentParam.span" v-for="item in data.contentParam.contentList">
                    <BusiIntroduceContent :contentParam="item"/>
                </el-col>
            </el-row>
            <div class="d-flex justify-content-end buttom_line">
                <div class="my_buttom">了解更多详情 -></div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { reactive } from "vue";
    import BusiIntroduceContent from '@/components/BusiIntroduceContent.vue'

    const data = reactive({
        contentParam: {
            span:8,
            gutter: 50, //列之间的间隔
            contentList:[
                {title:'不良资产线上尽职调查', text:'实时分布式查询数据仓库各模块数据，快速生成不良资产项目线上尽调报告，以及一键分析客户间关联关系等。'},
                {title:'客户洞察', text:'聚合碎片化客户信息，沉淀客户数据资产，多维度分析客户数据并提供统一客户视图，实现客户洞察、客群划分和客户画像。'},
                {title:'智慧营销', text:'通过对客户画像和资产标签的智能匹配，实现精准营销。'},
            ]
        }
    })
</script>
<style scoped>
    .session {
        height: 514px;
        padding: 72px 72px 64px 72px;
        background-color: #1D428A;
        background-image: url('/imgs/commercial-bg.svg');
    }
    .title {
        color: #FFFFFF;
        font-size: 36px;
        font-weight: 600;
        line-height: 48px;
    }
    .buttom_line {
        padding-top: 100px;
    }
    .my_buttom {
        background-color: #60A600;
        color: #FFFFFF;
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 4px 4px 16px 0px #132B5A;
        padding: 16px 40px 16px 40px;
    }
</style>